import Taro, { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import './index.less';
// let answerHelper = require('../../utils/answer-helper');
import { addNum, initData } from '../../utils/answer-helper';
let app = Taro.getApp();
let globalData = app.globalData;
import bgImg from '../../images/1-1.jpg';
export default class ItemContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemId: null, //题目ID
      choosedNum: null, //选中答案索引
      choosedId: null, //选中答案id

    };
  }
  componentWillMount() {
    console.log(1);
    initData();
    this.setState({
      globalData: Taro.getApp().globalData
    });
  }

  componentDidMount() {
    console.log(this.props);
  }

  componentWillUnmount() {
    console.log(3);
  }

  componentDidShow() { // 在h5中生命周期一直没走
    console.log(2222222)
    // 小程序起作用，初始化重置数据
    initData();
    this.setState({
      globalData: Taro.getApp().globalData
    });
  }

  componentDidHide() {
    console.log(5);
  }
  goItem = e => {
    Taro.navigateTo({
      url: '/pages/item/index'
    });
  };
  chooseType = type => {
    switch (type) {
      case 0:
        return 'A';
      case 1:
        return 'B';
      case 2:
        return 'C';
      case 3:
        return 'D';
    }
  };
  // 选中问题的答案
  choosed = (type, id) => {
    this.setState({
      choosedNum: type,
      choosedId: id
    });
  };
  // 点击下一题
  nextItem = e => {
    let { choosedNum, choosedId } = this.state;
    if (choosedNum != null) {
      this.setState({
        choosedNum: null
      });
      let _self = this
      addNum(choosedId, function() {
        // _self.setState({
        //   globalData: app.globalData
        // });
        // console.log(this.state.globalData)
      });
      //保存答案，题目索引加1
    } else {
      Taro.showToast({
        title: '您还没有选择答案哦',
        icon: 'none',
        duration: 2000
      }).then(res => console.log(res));
    }
  };
  submitAnswer = () => {
    let { choosedNum, choosedId } = this.state;
    if (choosedNum != null) {
      this.setState({
        choosedNum: null
      });
      addNum(choosedId,function(){

      });
      Taro.navigateTo({
        url: '/pages/score/index'
      });
      // Taro.navigateBack({ delta: 2 })
    } else {
      Taro.showToast({
        title: '您还没有选择答案哦',
        icon: 'none',
        duration: 2000
      }).then(res => console.log(res));
    }
  };
  render() {
    const fatherComponent = this.props.fatherComponent;
    // const list = this.props.list
    return (
      <View className="index" style={{backgroundImage: `url(${bgImg})`}}>
        <View>
          <View className="top_tips">
            {fatherComponent == 'home' ? (
              <Text className="item_tip">第一周</Text>
            ) : (
              <Text className="item_tip">
                题目{globalData.itemNum}
              </Text>
            )}
          </View>
          {fatherComponent == 'home' && (
            <View className="">
              <View className="home_logo item_container_style" />
              <View className="start button_style" onClick={this.goItem} />
            </View>
          )}
          {fatherComponent == 'item' && (
            <View className="item_container">
              <View className="item_back item_container_style">
                <View className="item_list_container">
                  <View className="item_title">
                    {globalData.itemDetail[globalData.itemNum - 1].topic_name}
                  </View>
                  <View>
                    {globalData.itemDetail[
                      globalData.itemNum - 1
                    ].topic_answer.map((item, index) => {
                      return (
                        <View
                          className="item_list flex justify-content-between"
                          key={item.topic_answer_id}
                          onClick={this.choosed.bind(
                            this,
                            index,
                            item.topic_answer_id
                          )}
                        >
                          {this.state.choosedNum == index ? (
                            <Text className="option_style has_choosed">
                              {this.chooseType(index)}
                            </Text>
                          ) : (
                            <Text className="option_style">
                              {this.chooseType(index)}
                            </Text>
                          )}
                          <Text className="option_detail">
                            {item.answer_name}
                          </Text>
                        </View>
                      );
                    })}
                  </View>
                </View>
              </View>
              {globalData.itemNum < globalData.itemDetail.length ? (
                <Text
                  className="next_item button_style"
                  onClick={this.nextItem}
                />
              ) : (
                <Text
                  className="submit_item button_style"
                  onClick={this.submitAnswer}
                />
              )}
            </View>
          )}
        </View>
      </View>
    );
  }
}
